<template>
	<view class="content">
		<view class="header">
			<view @click="chooseImg">
				<image :src="avatar" mode=""></image>
				<view>点击修改头像</view>
			</view>
		</view>
		<view class="form-box">
			<view class="form-item">
				<label for="">用户ID</label>
				<input type="text" v-model="vipid" disabled />
			</view>
			<view class="form-item">
				<label for="">昵称</label>
				<input type="text" v-model="nickName" disabled />
			</view>
			<view class="form-item">
				<label for="">性别</label>
				<radio-group name="" @change="radioChange">
					<label v-for="(item,index) in sex" :key="item.value">
						<radio :value="item.value" :checked="index==current" /><text>{{item.name}}</text>
					</label>
				</radio-group>
			</view>
			<view class="form-item">
				<label for="">城市</label>
				<input type="text" v-model="city" placeholder="选择城市" @click="openCityPiker" />
			</view>
			<view class="form-item">
				<label for="">身高</label>
				<input type="text" v-model="vipheight" placeholder="填写身高cm" />
			</view>
			<view class="form-item">
				<label for="">体重</label>
				<input type="text" v-model="vipweight" placeholder="填写体重kg" />
			</view>
			<view class="form-item">
				<label for="">个性签名</label>
				<input type="text" v-model="vipsign" placeholder="填写你的个性签名" />
			</view>
			<view class="divider">
				健身经验
			</view>
			<view class="tag">
				<uni-data-checkbox v-model="experienceRadio" :multiple="false" :localdata="experienceData" mode="tag" @change="experienceSelect"/>
			</view>
			<view class="divider">
				健身目的
			</view>
			<view class="tag">
				<uni-data-checkbox v-model="purposeCheck" :multiple="true" :localdata="purposeData" mode="tag" @change="purposeSelect"/>
			</view>
			<button type="default" @click="saveInfo">保存</button>
		</view>
		<uni-data-picker ref="picker" placeholder="请选择地址" popup-title="请选择城市" @change="onchange"
			@nodeclick="onnodeclick" :localdata="cityData">
		</uni-data-picker>

	</view>
</template>

<script>
	import {
		reactive,
		toRefs
	} from 'vue'
	import {
		onShow,onLoad
	} from '@dcloudio/uni-app'
	import store from '../../../store/index.js'
	import myRequest from '../../../utils/myRequest.js'
	export default {
		setup() {
			let data = reactive({
				avatar: '../../../static/logo.png',
				current: '',
				sex: [{
					value: '男',
					name: '男'
				}, {
					value: '女',
					name: '女'
				}],
				vipid: '',
				nickName: '',
				city: '',
				userSex:'',
				vipheight: '',
				vipweight: '',
				vipsign: '',
				experience: '',
				purpose: '',
				experienceRadio: '',
				experienceData: [{
					text: '健身小白',
					value: 0
				}, {
					text: '健身爱好者',
					value: 1
				}, {
					text: '健身教练',
					value: 2
				}, ],
				purposeCheck: [],
				purposeData: [{
					text: '想要减脂',
					value: 0
				}, {
					text: '想要增脂',
					value: 1
				}, {
					text: '想要增肌',
					value: 2
				}, {
					text: '想要修身',
					value: 3
				}, ],
				cityData: [{
					text: '四川省',
					value: '1-0',
					children: [{
						text: '成都市',
						value: '1-1-0',
						children: [{
							text: '成华区',
							value: '1-2-1'
						}, {
							text: '武侯区',
							value: '1-3-1'
						}, {
							text: '青羊区',
							value: '1-4-1'
						}, {
							text: '龙泉驿区',
							value: '1-5-1'
						}, {
							text: '郫都区',
							value: '1-6-1'
						}, {
							text: '青白江区',
							value: '1-7-1'
						}, ]
					}, {
						text: '广元市',
						value: '2-0',
						children: [{
							text: '利州区',
							value: '2-1'
						}, {
							text: '元坝区',
							value: '2-2'
						}, {
							text: '朝天区',
							value: '2-3'
						}]
					}, ]
				}],
				openCityPiker() {
					this.$refs.picker.show()
				},
				onchange(e) {
					const value = e.detail.value
					let str = ''
					for (let i = 0; i < value.length; i++) {
						str += value[i].text
					}
					data.city = str
				},
				experienceSelect(e) {
					console.log(e)
					console.log(e.detail.data.text)
					data.experience = e.detail.data.text
				},
				purposeSelect(e) {
					let str = ''
					for(let i = 0; i<e.detail.data.length;i++){
						str+=e.detail.data[i].text
					}
					data.purpose = str
				},
				radioChange: function(evt) {
					for (let i = 0; i < data.sex.length; i++) {
						if (data.sex[i].value === evt.detail.value) {
							data.current = i;
							data.userSex = evt.detail.value
							break;
						}
					}
				},
				onnodeclick(node) {},
				getVipInfo(){
					let vipid = data.vipid;
					myRequest({
						url:'/getappvipinfo',
						data:{vipid}
					}).then(res=>{
						console.log(res.data)
						console.log(res.data.data[0].vipSex)
						data.city = res.data.data[0].vipCity
						data.userSex = res.data.data[0].vipSex
						if(data.userSex=='男'){
							data.current == 0
						}else {
							data.current == 1
						}
						data.vipsign = res.data.data[0].vipSign
						data.experience = res.data.data[0].vipexperience
						data.vipheight = res.data.data[0].vipheight
						data.purpose = res.data.data[0].vippurpose
						data.vipweight = res.data.data[0].vipweight
					})
				},
				saveInfo() {
					let userInfo = {
						sex:data.userSex,
						city:data.city,
						vipheight:data.vipheight,
						vipweight:data.vipweight,
						vipsign:data.vipsign,
						experience:data.experience,
						purpose:data.purpose,
						vipid:data.vipid
					}
					myRequest({
						url:'/appeditvipinfo',
						method:'post',
						data:userInfo
					}).then(res=>{
						console.log(res)
					})
					myRequest({
						url:'/editavatar',
						method:'post',
						data:{
							vipid:data.vipid,
							avatar:data.avatar
						}
					}).then(res=>{
						console.log(res)
						store.commit('editUserAvatar',data.avatar)
					})
				},
				chooseImg() {
					uni.chooseImage({
						count:1,
						sizeType:["original"],
						success(res) {
							console.log(res)
							data.avatar=res.tempFilePaths[0]
						}
					})
				}
			})
			onLoad(() => {
				data.vipid = store.state.userdata[0].vipId
				data.nickName = store.state.userdata[0].vipName
				data.avatar = store.state.userdata[0].vipavatar
				data.getVipInfo()
				data.experienceSelect()
			})
			return {
				...toRefs(data)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #F9F9F9;
		height: 100vh;
	}

	.header {
		padding: 50rpx 0;
		background-color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-content: center;
		color: #999999;
		font-size: 28rpx;

		>view {
			width: 200rpx;
			height: 200rpx;
			margin-top: 10rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;

			>image {
				width: 100rpx;
				height: 100rpx;
			}
		}
	}

	.form-box {
		background-color: #FFFFFF;
		border-top: 1px solid #F2F2F2;
		margin-top: 20rpx;
	}

	.form-item {
		display: flex;
		justify-content: flex-start;
		padding: 26rpx 40rpx;
		border-bottom: 1px solid #F2F2F2;

		>label {
			width: 200rpx;
			color: #333333;
			font-size: 30rpx;
		}

		>input {
			font-size: 30rpx;
		}
	}

	.divider {
		font-size: 26rpx;
		color: #999999;
		padding: 36rpx 40rpx;
		background-color: #F9F9F9;
	}

	.tag {
		display: flex;
		justify-content: space-between;
		padding: 30rpx 40rpx;
	}
	button {
		margin: 15rpx auto;
		width: 150rpx;
		background-color: #3884C0;
		color: #FFFFFF;
	}
</style>
